<template>
  <view class="box">
    <view class="content-area">
      <VaccineRecord :records="breedingRecords"></VaccineRecord>
    </view>
    
    <view class="header">
      <button class="add-button" @click="goToTrace">新增</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import VaccineRecord from '@/components/Quarantinehome/Quarantinehome.vue'; // 引入子组件
import cowImg from '/static/map/cow.png'; // 确保路径正确
import { breedingList } from '@/api/manageleft.js'; // 引入API调用函数

// 定义响应式数据
const breedingRecords = ref([]);

// 时间格式化函数
const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 加载数据
const loadBreedingRecords = async () => {
  try {
    const response = await breedingList();
    if (response.code === 200) {
      breedingRecords.value = response.data.breedingList.map(item => ({
        entries: [
          {
            img: cowImg,
            type: '牲畜编号',
            imei: item.F_IMEI
          }
        ],
        details: [
          { label: '预测发情时间', value: formatDate(item.F_EsTimateTime) },
          { label: '实际发情时间', value: formatDate(item.F_SjTimateTime) }
        ],
        operator: item.F_Opert,
        date: formatDate(item.F_CreateTime)
      }));
    } else {
      console.error('获取发情记录失败:', response.msg);
    }
  } catch (error) {
    console.error('获取发情记录错误:', error);
  }
};

// 前往追踪页面
const goToTrace = () => {
  console.log('前往追踪页面');
  // 这里可以添加导航逻辑，例如 router.push('/trace');
};

// 组件挂载时加载数据
onMounted(() => {
  loadBreedingRecords();
});
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content-area {
  background-color: #f3f5f8; // 设置背景为浅灰色
  flex: 1; // 确保内容区域占据剩余空间
  padding: 30rpx;
  overflow: auto; // 确保内容可滚动
}

.header {
  .add-button {
    background-color: #0bcb75;
    color: white;
    border: none;
    border-radius: 8rpx;
    padding: 16rpx;
    width: 100%;
    font-size: 32rpx;
    margin-top: 40rpx;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>